<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
    form{
        margin:0 50px;
    }
</style>
</head>
<body>
<div class="h1 text-center">注册页面</div>
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">用户名</label>
        <input type="email" class="form-control" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="pass" placeholder="请输入密码">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">确认密码</label>
        <input type="password" class="form-control" id="repass" placeholder="请再次输入密码">
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox" name="agree"> 同意协议
        </label>
    </div>
    <button type="button" class="btn btn-default">注册</button>
</form>
</body>
<script src="./js/promiseAjax.js"></script>
<script type="text/javascript">

var btn = document.querySelector("button[type='button']");
btn.addEventListener("click",register);
function register(){
    var agree = document.querySelector("[name='agree']");
    if(!agree.checked){
        alert("请同意协议！！！");
        return;
    }
    var username = document.querySelector("#username").value.trim();
    var password = document.querySelector("#pass").value.trim();
    pAjax({
        url:"./server/register.php",
        type:"post",
        data:{
            username:username,
            password:password,
        }
    }).then(function(res){
        if(res.status==200){
            alert(res.msg);
            location.href = "login.html"
        }else{
            alert(res.msg);
            return;
        }
    });
}
</script>
</html>